<template>
  <section>
    <div class="history">
      <div class="title">
        <h4>历史记录</h4>
        <van-icon name="delete" @click="clearHistory" />
      </div>
      <div class="box">
        <van-tag plain  v-for="item in historyhotarr" :key="item">{{item}}</van-tag>
        <!-- <van-tag plain>单鞋</van-tag>
        <van-tag plain>夏凉被</van-tag>
        <van-tag plain>墨镜</van-tag>
        <van-tag plain>母亲节</van-tag>
        <van-tag plain>520元礼包抢先领</van-tag>
        <van-tag plain>法式浪漫绣球四件套</van-tag> -->
      </div>
    </div>
    <div class="history">
      <div class="title">
        <h4>热门搜索</h4>
      </div>
      <div class="box">
        <van-tag plain :class="item.is_hot==1?'active':''" v-for="(item,index) in hotarr" :key="index">{{item.keyword}}</van-tag>
        <!-- <van-tag plain>单鞋</van-tag>
        <van-tag plain>墨镜</van-tag>
        <van-tag plain>夏凉被</van-tag>
        <van-tag plain>新品上市</van-tag>
        <van-tag plain>日式</van-tag>
        <van-tag plain>母亲节</van-tag> -->
      </div>
    </div>
  </section>
</template>

<script>
import {ClearHistory} from '@/request/api'
export default {
  data(){
    return {
    }
  },
  props:['historyhotarr','hotarr'],
  methods:{
    clearHistory(){
      ClearHistory()
        .then(res=>{
          if(res.errno == 0){
            // console.log(res);
            this.$toast.success('删除成功！');
          }
        })
    }
  }
};
</script>

<style lang="less" scoped>
section {
  .history {
    padding: 0 5% 4px;
    background: #fff;
    margin-bottom: 20px;
  }
  .title {
    font-size: 22px;
    height: 40px;
    line-height: 40px;
    h4 {
      float: left;
      margin: 0;
      font-weight: normal;
    }
    .van-icon {
      float: right;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .box {
    .van-tag--plain {
      font-size: 14px;
      margin-right: 5px;
      margin-bottom: 5px;
      &.active {
        color:red;
      }
    }
  }
}
</style>